<template>
	<view >
		<uni-nav-bar :statusBar="true"  @clickRight="submit"   @clickLeft="search" >
		
				<!-- 左边 -->
				<block slot="left">
					<view class="search" @tab="search">
						
						<u-icon name="search" color="#FF9A22" size="40"></u-icon>
					</view>
				</block>
				<!-- 中间 -->
					<view class="center u-f-ajc">
						<scroll-view class="uni-swiper-tab" scroll-x>
							<view @click="changtab(index)" v-for="(tab,index) in tabBars":key="tab.id" class="swiper-tab-list" :id="tab.id" :class="tabIndex==index ? 'uni-tab-item-title-active':''">
								{{tab.name}}
								<view :class="tabIndex==index?'tab-bottom-border':''" >
									
								</view>
							</view>
							
						</scroll-view>
					
					</view>
				<!-- 右边 -->
				<block slot="right">
					
					<view class="search">
						<u-icon name="edit-pen-fill" color="#333333" size="40"></u-icon>
					</view>
				</block>
			
		</uni-nav-bar>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				index1:this.tabIndex
			}
		},
		props:{
			tabBars:Array,
			tabIndex:Number
		},
		methods:{
			//切换tab
			changtab(index){
				this.$emit('changtab',index)
				
			},
			
			//去发布
			submit(){
				uni.navigateTo({
					url:'../add-input/add-input'
				})
			},
			//去搜索
			search(){
				uni.navigateTo({
					url:'../search/search'
				})
			}
		}
	}
</script>

<style scoped>
	.new-list-r{
		width: 100%;
	}
	
	.new-list-share{
		display: flex;
		background-color: #F7F7F7;
		border-radius: 10upx;
		width: 100%;
		
	
	
	}
	.new-list-share-text{
		margin-left: 15upx;
		margin-top: 8upx;
	
	}
	.new-list-share-img{
		
		width: 170upx;
		height: 170upx;
		border-radius: 10upx;
	}
	
	.new-list-info>u-icon{
		margin-left: 20upx;
	}
	.new-list-3{
		position: relative;
		margin-bottom: 25upx;
	}
	.new-video-play{
		position: absolute;
		color: #FFFFFF;
		left: 250upx;
	}
	.new-video-info{
		 position: absolute;
		 color: #FFFFFF;
			right: 15px;
			bottom: 5px;
			background-color: rgba(51, 51, 51, 0.69);
			font-size: 20upx;
			border-radius: 10upx;
	}
	.new-bottom{
		margin-top: 20upx;
		display: flex;
		border-bottom: #BBBBBB 1upx solid;
	}
	/* 内容样式 */
	.new-list-4{
		display: flex;
		align-items: center;
		justify-content: space-between;
		color:#BBBBBB ;
	}
	.guanzhu{
		background-color: #F3F3F3;
		margin-right: 20upx;
	}
	.new-sex ,.new-sex-woman{
		
		background-color: #007AFF;
		color: #FFFFFF;
		border-radius: 20upx;
		font-size: 20upx;
		width: 70upx;
		line-height: 30upx;
		margin-left: 20upx;
		padding-top: 5upx;
	}
	.new-sex-woman{
		background-color: #FF7CC1;	
		
	}
	.new-name{
		color: #D5D5D5;
		margin-left: 20upx;
	}
	.new-img{
		size: 100%;
		border-radius: 10upx;
		margin-top: 15upx;
	}
	.new-list{
		display: flex;
		margin-left: 15upx;
		margin-right: 15upx;
		margin-top: 20upx;
	}
	.new-list-l>image{
		width: 90upx;
		height: 90upx;
		border-radius: 50%;
	
	}
	.uni-tab-item-title-active{
		color: #333333;
		font-weight: bold;
		
	}
	/* 导航样式 */
	.swiper-tab-list{
		width:90upx;
	}
	.tab-bottom-border{
		margin-left: 5upx;
		border-radius: 20upx;
		background-color: #FDDD32;
		border-bottom: #FDDD32 1upx solid;
		height: 13upx;
		width: 80upx;
	}
	.uni-swiper-tab{
		margin-left: 140upx;
		border-bottom: #FFFFFF 1upx solid;
	}
	.search{
		margin-left: 30upx;
	}
</style>
